<template>
  <div
    style="width: 100%; height: 90vh; overflow: hidden; overflow-y: scroll"
    v-if="tableList.length"
  >
    <!-- <el-button @click="toggle">切换</el-button> -->
    <!-- 时间线 -->
    <el-timeline style="max-width: 70vh; margin: 0 auto">
      <div v-for="(item, index) in tableList" :key="index">
        <el-timeline-item :timestamp="item.date" placement="top">
          <el-card>
            <h4>{{ item.name }}</h4>
            <p>{{ item.title }} {{ item.thisTime }}</p>
          </el-card>
        </el-timeline-item>
      </div>
    </el-timeline>
  </div>
  <div v-else style="width: 100%; height: 90vh">
    <el-empty description="页面无数据" />
  </div>
  <!-- <el-button-group>
    <el-button @click="decrease(10)">----</el-button>
    <el-button @click="increase(10)">+++++</el-button>
  </el-button-group> -->
  <!-- 进度条 -->
  <div class="demo-progress">
    <el-progress
      :text-inside="true"
      :percentage="percentage"
      :stroke-width="15"
      status="success"
      striped
      striped-flow
      indeterminate="true"
    >
      <span>{{ percentage }}%</span>
    </el-progress>
  </div>
</template>

<script >
import { ref, onMounted, computed, onBeforeUnmount } from 'vue'
import { useStore } from 'vuex'
import until from '../../until/csUntil/deviceUtils'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  setup(_, { emit }) {
    // 在组件中获取router实例

    const store = useStore()
    // 模拟点击菜单项触发路由跳转

    const timer = ref(null)

    const devicell = ref(null)
    onMounted(() => {
      // 级联选择器
      try {
        let deviceTypeStr = window.api.getDeviceTypeJsonStr()
        let CustomDevice = window.api.listCustomDeviceType()
        let deviceTypeStrlist = JSON.parse(deviceTypeStr)
        if (CustomDevice) {
          let CustomDevicelist = JSON.parse(CustomDevice)
          CustomDevicelist?.forEach((item) => {
            deviceTypeStrlist.children.push(item)
          })
        }
        store.commit('deviceTypeStrupdate', deviceTypeStrlist)
      } catch (e) {
        console.log(e)
        window.electron.ipcRenderer.send('close')
        ElMessageBox.confirm('程序初始化错误，请联系管理员，错误代码[0X0001]', {
          confirmButtonText: '确定',
          type: 'error'
        }).then(() => {
          window.electron.ipcRenderer.send('closemainWindow')
        })
        return
      }
      try {
        const listDvcAndDvcVer = window.api.listDvcAndDvcVer()
        devicell.value = JSON.parse(listDvcAndDvcVer)
        store.commit('beforeAllDeviceupdate', JSON.parse(listDvcAndDvcVer))
      } catch (e) {
        alert('数据库有误')
        return
      }

      // 调用模拟点击菜单的方法
      let titleres = '暂无COM设备'
      let ddssdds = ''
      devicell.value.forEach((item) => {
        if (item?.ComPort) {
          ddssdds = item.ComPort
          const result = window.api.openCom(
            item.id,
            item?.ComPort,
            JSON.stringify(item.BaudRate),
            item.DevicetypeValue,
            item.Channels
          )
          if (result) {
            titleres = `连接${ddssdds}成功`
          }
          if (result === false) {
            titleres = `连接${ddssdds}失败`
          }
          tableList.value.push({
            date: time.value.toLocaleDateString(),
            title: titleres,
            name: item.name,
            thisTime: time.value.toLocaleString()
          })
        }
      })

      //   // const result = window.api.openCom('COM3', '9600')
      timer.value = setInterval(() => {
        increase(50)
      }, 2000)
    })
    onBeforeUnmount(() => {
      clearInterval(timer.value)
    })
    // 日志
    const time = ref(new Date())
    const tableList = ref([])

    // 进度条
    const percentage = ref(0)
    // 进度条加10
    const increase = (num) => {
      percentage.value += num
      if (percentage.value > 100) {
        percentage.value = 100
        toggle()
      }
    }
    // 进度条减10
    const decrease = (num) => {
      percentage.value -= num
      if (percentage.value < 0) {
        percentage.value = 0
      }
    }
    // 任务完成进入主页面
    const toggle = () => {
      emit('update', false)
    }
    return {
      percentage,
      timer,
      tableList,
      increase,
      decrease,
      toggle
    }
  }
}
</script>

<style>
.demo-progress .el-progress--line {
  margin-bottom: 0;
  max-width: 100%;
}

/* 修改滚动条的轨道（Track）样式 */
::-webkit-scrollbar {
  width: 3px; /* 设置滚动条宽度 */
  height: 20px;
}

/* 修改滚动条的滑块（Thumb）样式 */
::-webkit-scrollbar-thumb {
  background: skyblue; /* 设置滚动条滑块的背景颜色 */
  border-radius: 5px; /* 设置滚动条滑块的圆角 */
}

/* 修改滚动条的轨道（Track）背景样式 */
::-webkit-scrollbar-track {
  background: white; /* 设置滚动条轨道的背景颜色 */
}

/* 修改滚动条的轨道（Track）背景样式，当鼠标悬停在滚动条上时 */
::-webkit-scrollbar-track:hover {
  background: white; /* 设置悬停时的背景颜色 */
}
</style>